<!-- 各县区逐日平均雨量 -->
<!-- 初步完结2024-10-8 -->
<template>
    <div class="container">
        <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
            <span style="margin-right: 20px; font-weight: bold;">天气实况监测</span>
            <span style="margin-right: 20px;">|</span>
            <span style="display: flex; align-items: center;">
                <span>各县区逐日平均雨量</span>
            </span>
        </div>
        <div class="content">

            <div class="table">
                <!-- 平衡雨量 -->
                <div class="title">
                    <span>{{ station }}过去10日各区县逐日平均降雨量（毫米）</span><br>
                </div>
                <el-table stripe :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                    :data="TableData" max-height="400px">
                    <el-table-column prop="river" label="区县" align="center" sortable></el-table-column>
                    <el-table-column prop="riqi" label="日期" align="center" sortable></el-table-column>
                    <el-table-column prop="rainDay" label="平均降雨量" align="center" sortable></el-table-column>

                </el-table>
                <!-- 最大雨量 -->
                <div class="title">
                    <span>{{ station }}电站过去10日各区县逐日最大降雨量（毫米）</span><br>
                </div>
                <el-table stripe :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                    :data="TableData" max-height="400px">
                    <el-table-column prop="river" label="区县" align="center" sortable></el-table-column>
                    <el-table-column prop="riqi" label="日期" align="center" sortable></el-table-column>
                    <el-table-column prop="sidMax" label="最大降雨量站" align="center" sortable></el-table-column>
                    <el-table-column prop="rainMax" label="最大降雨量" align="center" sortable></el-table-column>

                </el-table>
                <!-- 平衡雨量 -->
                <div class="title">
                    <span>{{ station }}过去10日各区县逐日最小降雨量（毫米）</span><br>
                </div>
                <el-table stripe :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                    :data="TableData" max-height="400px">
                    <el-table-column prop="river" label="区县" align="center" sortable></el-table-column>
                    <el-table-column prop="riqi" label="日期" align="center" sortable></el-table-column>
                    <el-table-column prop="sidMin" label="最小降雨量站" align="center" sortable></el-table-column>
                    <el-table-column prop="rainMin" label="最小降雨量" align="center" sortable></el-table-column>
                </el-table>

            </div>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import { reqDailyAverageRain } from '@/api/monitor';
export default {
    name: "dailyAverageRain",
    data() {
        return {
            station: Cookies.get('station_name'),
            TableData: [],

        }
    },
    mounted() {
        this.getData()
    },
    methods: {

        // 表格样式
        headerCellStyle() {
            return {
                background: '#0c2340',
                color: '#fff',
            };
        },
        cellStyle() {
            return {
                background: '#05152e',
                color: '#fff',
            };
        },
        rowStyle() {
            return {
                height: '30px',
            };
        },
        async getData() {
            let res = await reqDailyAverageRain(Cookies.get('name'))
            console.log(res.data.data)
            this.TableData = res.data.data
        }
    },
}
</script>

<style scoped lang="scss">
// 滚动条样式
::v-deep .el-table__body-wrapper {

    // 整个滚动条
    &::-webkit-scrollbar {
        width: 10px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);

    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: 5px solid white;
    }


}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0c2340;
    border-radius: 2px;
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}

::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

.container {
    width: 100%;


    .content {
        width: 100%;

        .title {
            width: 100%;
            display: grid;
            place-items: center;

            span {
                color: white;
                font-weight: bold
            }

            margin: 20px 0;
        }

        .table {
            width: 100%;

        }
    }
}
</style>